<template>
  <c-select
    v-bind="$attrs"
    v-on="$listeners"
    filterable
    remote
    allow-create
    :value="value"
    :options="cateList"
    :loading="loading"
    :remote-method="getData"
    :props="props"
    @change="handleItemChange"
  ></c-select>
</template>

<script>
export default {
  components: {},
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      props: {
        label: 'agency_name',
        value: 'agency_name',
      },
      selected: null,
      loading: false,
      cateList: [],
      tableName: 'credit_agency_info_view',
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getData()
  },
  methods: {
    getData(name) {
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, {
          index: 1,
          size: 15,
          agency_name: name,
        })
        .then(res => {
          this.cateList = res?.data?.data ?? []
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleItemChange(val) {
      this.$emit('input', val)
      const select = this.cateList.find(item => item.agency_name === val) || {}
      this.$emit('select', select)
    },
  },
}
</script>

<style lang="scss" scoped></style>
